import React, { useCallback, useMemo, useState } from "react";
import { FilterModulesProps } from "./type";
import RangeMolecule from "../../Molecules/Range.molecule";

const FilterModules: React.FC<FilterModulesProps> = (props) => {
  const { priceRange, maxPrice, handlePriceChange } = props;
  const [value, setValue] = useState<[number, number]>(priceRange);

  const handleFilterChange = useCallback(
    (newValue: [number, number]) => {
      setValue(newValue);
      handlePriceChange(newValue);
    },
    [handlePriceChange]
  );

  const priceFilterModule = useMemo(
    () => (
      <RangeMolecule
        minValue={0}
        maxValue={maxPrice}
        value={value}
        onChange={handleFilterChange}
      />
    ),
    [maxPrice, value, handleFilterChange]
  );

  return (
    <div className="flex flex-col w-full max-w-72">{priceFilterModule}</div>
  );
};

export default React.memo(FilterModules);
